<template>
  <view class="login-container">
    <view class="form-container">
      <input class="input" type="text" v-model="username" placeholder="请输入用户名" />
      <input class="input" type="password" v-model="password" placeholder="请输入密码" />
      <button class="button" @click="handleLogin">登录</button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      if (this.username === '' || this.password === '') {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        });
        return;
      }
      // 这里假设你有一个登录的API接口
      uni.request({
        url: 'https://your-api-url.com/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            // 登录成功后，可以进行跳转或者保存token等操作
            uni.setStorageSync('token', res.data.token);
            uni.switchTab({
              url: '/pages/index/index'
            });
          } else {
            uni.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请稍后再试',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>


<style lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;

  .form-container {
    width: 80%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .input {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .button {
      width: 100%;
      padding: 10px;
      background-color: #007aff;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 16px;
    }
  }
}
</style>
